<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      
      <el-form-item label="公司名称" prop="orgName">
        <el-input
          v-model="queryParams.orgName"
          placeholder="请输入公司名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      
      <el-form-item label="营业执照号" prop="businessLicenseNo" label-width="100px">
        <el-input
          v-model="queryParams.businessLicenseNo"
          placeholder="请输入营业执照号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item label="法人姓名" prop="legalName">
        <el-input
          v-model="queryParams.legalName"
          placeholder="请输入法人姓名"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="法人身份证" prop="legalIdcard" label-width="100px">
        <el-input
          v-model="queryParams.legalIdcard"
          placeholder="请输入法人身份证号码"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
    
      <el-form-item label="法人手机号" prop="legalMobile" label-width="100px">
        <el-input
          v-model="queryParams.legalMobile"
          placeholder="请输入法人手机号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      
      <el-form-item label="联系人姓名" prop="businessName" label-width="100px">
        <el-input
          v-model="queryParams.businessName"
          placeholder="请输入业务联系人姓名"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

   
     
    <el-table v-loading="loading" :data="orgList" >
       <el-table-column type="selection" width="55" align="center" />
	  <el-table-column label="账户名称"  width="150" align="center" prop="userName" :show-overflow-tooltip="true" fixed/>
      <el-table-column label="公司名称"  width="200" align="center" prop="orgName" :show-overflow-tooltip="true" fixed/>
      <el-table-column label="营业执照号" width="200"  align="center" prop="businessLicenseNo" :show-overflow-tooltip="true" fixed/>
      <el-table-column label="法人姓名" width="100" align="center" prop="legalName" :show-overflow-tooltip="true" fixed/>
      <el-table-column label="法人身份证号码" width="200"  align="center" prop="legalIdcard" :show-overflow-tooltip="true" fixed/>
	  <el-table-column label="商户状态" width="100" align="center" prop="orgStatus" >
	  		  <template #default="scope">
	  			<span v-if="scope.row.orgStatus==0">未提交</span>
	  			<span v-if="scope.row.orgStatus==1">待审核</span>
	  			<span v-if="scope.row.orgStatus==2">开通中</span>
	  			<span v-if="scope.row.orgStatus==3">已开通</span>
	  		  </template>
	  </el-table-column>
	  <el-table-column label="开户结果" width="200" align="center" prop="bfInfo"  :show-overflow-tooltip="true"/>
      <el-table-column label="法人手机号" width="150" align="center" prop="legalMobile" />
      <el-table-column label="联系人姓名" width="100" align="center" prop="businessName" />
      <el-table-column label="联系人身份证号" width="200"  align="center" prop="businessIdcard" />
      <el-table-column label="联系人手机" width="150" align="center" prop="businessMobile" />
      <el-table-column label="联系人邮箱" width="200" align="center" prop="businessEmail" />
     
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width" fixed="right">
        <template #default="scope">
          <el-button link type="primary" icon="View" @click="openOrgDetail(scope.row)" v-hasPermi="['system:org:edit']">查看</el-button>
          <el-tooltip content="开通商户" placement="top" v-if="scope.row.tenantId ==null && scope.row.orgStatus==1 && scope.row.contractFile!=null && scope.row.adminFile!=null">
          <el-button link type="primary" icon="Edit" @click="handleOpen(scope.row)" v-hasPermi="['system:org:edit']">开通商户</el-button>
          </el-tooltip>
		  
		  <el-tooltip content="上传债转协议" placement="top" v-if="scope.row.tenantId ==null && scope.row.orgStatus==1 && scope.row.contractFile==null">
		  <el-button link type="primary" icon="Edit" @click="handleFileOpen(scope.row,1)" v-hasPermi="['system:org:edit']">上传债转协议</el-button>
		  </el-tooltip>
		  
		  <el-tooltip content="上传后台截图" placement="top" v-if="scope.row.tenantId ==null && scope.row.orgStatus==1 && scope.row.adminFile==null">
		  <el-button link type="primary" icon="Edit" @click="handleFileOpen(scope.row,2)" v-hasPermi="['system:org:edit']">上传后台截图</el-button>
		  </el-tooltip>
		  
		  <el-tooltip content="驳回" placement="top" v-if="(scope.row.bfStatus ==3 && scope.row.orgStatus==2) ||(scope.row.tenantId ==null && scope.row.orgStatus==1)">
		  <el-button link type="primary" icon="Edit" @click="handleBack(scope.row)" v-hasPermi="['system:org:edit']">驳回</el-button>
		  </el-tooltip>
		 
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

<!-- 开通对话框 -->
   <el-dialog :title="title" v-model="open" width="500px" append-to-body>
     <el-form ref="tenantRef" :model="form" :rules="rules" label-width="120px">
       <el-form-item label="公司名称" prop="companyName">
         <el-input v-model="form.companyName" placeholder="公司名称" disabled/>
       </el-form-item>
	   <el-form-item v-if="orgType==1" label="宝付机构编号" prop="walletNo">
	     <el-input v-model="form.walletNo" placeholder="宝付机构编号"/>
	   </el-form-item>
	   <el-form-item v-if="orgType==1" label="线下打款子账号" prop="accountNo">
	     <el-input v-model="form.accountNo" placeholder="线下打款子账号"/>
	   </el-form-item>
	   <el-form-item v-if="orgType==1" label="华通电子账号" prop="htAccountNo">
	     <el-input v-model="form.htAccountNo" placeholder="华通电子账号"/>
	   </el-form-item>
	   <el-form-item v-if="orgType==1"  label="对公账户名称" prop="accName">
	   	<el-input  v-model="form.accName" placeholder="对公账户名称" clearable />
	   </el-form-item>
	   <el-form-item v-if="orgType==1" label="对公账户卡号" prop="accNo">
	   	<el-input v-model="form.accNo" placeholder="对公账户卡号" clearable />
	   </el-form-item>
	   <el-form-item v-if="orgType==1" label="开户行名称" prop="bankName">
	   	<el-input v-model="form.bankName" placeholder="开户行名称" clearable />
	   </el-form-item>
	   <el-form-item v-if="orgType==1" label="开户行号" prop="bankCode">
	   	<el-input v-model="form.bankCode" placeholder="开户行号" clearable />
	   </el-form-item>
       <el-col :span="12">
          <el-form-item label="归属产品" prop="productId">
             
			 <el-tree-select
			    v-model="form.productId"
			    :data="productOptions"
			    :props="{ value: 'id', label: 'productName', children: 'children' }"
			    value-key="id"
			    placeholder="请选择产品"
			    check-strictly
			 />
          </el-form-item>
       </el-col>
     </el-form>
	 
     <template #footer>
       <div class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </template>
   </el-dialog>
 
 
 <!-- 上传文件模板对话框 -->
 <el-dialog :title="titleFile" v-model="fileopen" width="500px" append-to-body>
   <el-form ref="templateRef" :model="form" :rules="rules" label-width="80px">
     <el-form-item label="" prop="fileUrl">
        <!-- <file-upload v-model="fileUrl" :limit="1" :fileSize="10" :action="httpRequestPlus"></file-upload> -->
		<el-upload class="upload-demo avatar-uploader" accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/msword,application/pdf,image/jpg,image/jpeg,image/png" action="#" :show-file-list="false" :http-request="($event) => { httpRequestPlus($event) }">
			<el-icon class="avatar-uploader-icon">
				<el-button type="primary">选取文件</el-button>
			</el-icon>
		</el-upload>
     </el-form-item>
   </el-form>
 </el-dialog>
  </div>
</template>

<script setup name="Org">
import { listProduct} from "@/api/system/product";	
import {listOrg,openTenant,handleFail,uploadOrgFileByServer} from "@/api/system/org";

const { proxy } = getCurrentInstance();
const router = useRouter();
const productOptions= ref([]);
const orgList = ref([]);
const open = ref(false);
const fileopen = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const orgType = ref(2);
const titleFile = ref("");
const title = ref("");
const fileUrl = ref("");
const orgUserId = ref(null);
const fileType = ref(1);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    orgName: null,
    businessLicenseNo: null,
    legalName: null,
    legalIdcard: null,
    legalMobile: null,
    businessName: null,
    businessIdcard: null,
    orgStatus: null
  },
  rules: {
	  walletNo: [
	  	{ required: true, message: "机构编号不能为空", trigger: "blur" }
	  ],
	  accountNo: [
	  	{ required: true, message: "线下打款账号不能为空", trigger: "blur" }
	  ],
	  htAccountNo: [
	  	{ required: true, message: "华通电子账户不能为空", trigger: "blur" }
	  ],
    accName: [
    	{ required: true, message: "银行账户名称不能为空", trigger: "blur" }
    ],
    accNo: [
    	{ required: true, message: "银行账号不能为空", trigger: "blur" }
    ],
    bankName: [
    	{ required: true, message: "开户行名称不能为空", trigger: "blur" }
    ],
    bankCode: [
    	{ required: true, message: "开户行号不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询商户信息列表 */
function getList() {
  loading.value = true;
  listOrg(queryParams.value).then(response => {
    orgList.value = response.rows;
    total.value = Number(response.total);
    loading.value = false;
  });
}

function getProductSelect() {
  listProduct().then(response => {
    productOptions.value = proxy.handleTree(response.data, "id");
  });
};
// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    userId: null,
    productId: 1,
	accName: null,
	accNo: null,
	bankName: null,
	bankCode: null,
	walletNo: null,
	accountNo: null,
	htAccountNo: null
  };
  proxy.resetForm("tenantRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

function openOrgDetail(row) {
  router.push("/system/org-detail/index/" + row.userId);
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

function handleOpen(row) {
  reset();
 getProductSelect();
 form.value.userId = row.userId;
 form.value.companyName = row.orgName;
 open.value = true;
 title.value = "开通商户";
 orgType.value=row.types;
 
}

function handleFileOpen(row,type) {

 orgUserId.value = row.userId;
 fileType.value=type;
 if(type==1)
 {
	 fileUrl.value= row.contractFile;
 }
 else{
	 fileUrl.value= row.adminFile;
 }
 fileopen.value = true;
 titleFile.value = "文件上传";
 
}

function handleBack(row)
{
	const _userId =row.userId;
	handleFail(_userId).then(response => {
	  proxy.$modal.msgSuccess("已驳回");
	  getList();
	});
}

function httpRequestPlus(data) {
		var formData = new FormData();
		formData.append("file", data.file);
		formData.append("type", fileType.value);
		formData.append("userId", orgUserId.value);
		// 调用后端接口
		uploadOrgFileByServer(formData).then(res => {
			
			proxy.$modal.msgSuccess("上传成功");
			fileopen.value = false;
			getList();
		
		}).catch(err => {})
		
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["tenantRef"].validate(valid => {
    if (valid) {
		openTenant(form.value).then(response => {
		  proxy.$modal.msgSuccess("开通成功");
		  open.value = false;
		  getList();
		});
    }
  });
}

getList();
</script>
